<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-permission="['mp:add']" class="filter-item" type="primary" icon="el-icon-edit" @click="toAdd">添加</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中..." border fit highlight-current-row stripe>
      <el-table-column align="center" type="expand">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="4">
              <el-image :src="scope.row.url+'_200_200'"/>
            </el-col>
            <el-col :span="18">
              <p class="item">原始ID：{{ scope.row.originId }}</p>
              <p class="item">AppId：{{ scope.row.appId }}</p>
              <p class="item">AppSecret：{{ scope.row.appSecret }}</p>
              <p class="item">创建时间：{{ scope.row.createDate }}</p>
              <p class="item">备注：{{ scope.row.remark }}</p>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公众号名称" prop="name"/>
      <el-table-column align="center" label="类型" prop="typeName">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type===1?'':'danger'" effect="plain">{{ scope.row.typeName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="认证">
        <template slot-scope="scope">
          <el-tag :type="scope.row.verified?'success':'warning'">{{ scope.row.verified ? "已认证":"未认证" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="主体" align="center"/>
      <el-table-column align="center" label="操作" width="300" fixed="right">
        <template slot-scope="scope">
          <el-button v-permission="['mp:detail']" type="primary" size="mini" @click="toEdit(scope.row)">编辑</el-button>
          <el-button v-permission="['mp:delete']" type="danger" size="mini" @click="removeMp(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-permission="['mp:list']" v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="initList"/>

    <el-dialog :close-on-click-modal="false" :title="isAdd?'新增':'编辑'" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="center" label-width="100px">
        <el-form-item label="公众号名称" prop="name">
          <el-input v-model="dataForm.name" maxlength="20"/>
        </el-form-item>
        <el-form-item label="原始ID" prop="originId">
          <el-input v-model="dataForm.originId" :disabled="!isAdd" maxlength="50"/>
        </el-form-item>
        <el-form-item label="AppId" prop="appId">
          <el-input v-model="dataForm.appId" :disabled="!isAdd" maxlength="50"/>
        </el-form-item>
        <el-form-item label="AppSecret" prop="appSecret">
          <el-input v-model="dataForm.appSecret" :disabled="!isAdd" maxlength="100"/>
        </el-form-item>
        <el-form-item label="主体信息" prop="owner">
          <el-input v-model="dataForm.owner" maxlength="30"/>
        </el-form-item>
        <el-form-item label="二维码">
          <el-row>
            <el-col :span="4">
              <uploader :file-list.sync="fileList" @success="uploadQrCodeSuccess" @remove="removeQrCodeSuccess"/>
            </el-col>
            <el-col :span="10">
              <el-form-item label="类型" prop="type">
                <el-select v-model="dataForm.type" collapse-tags placeholder="请选择类型">
                  <el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="是否认证">
                <el-radio-group v-model="dataForm.verified" >
                  <el-radio-button :label="true">已认证</el-radio-button>
                  <el-radio-button :label="false">未认证</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="备注" prop="remark" >
          <el-input v-model="dataForm.remark" type="textarea" maxlength="200"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-permission="['mp:add']" v-if="isAdd" type="primary" @click="addMp">确定</el-button>
        <el-button v-permission="['mp:edit']" v-if="!isAdd" type="primary" @click="editMp">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { MpService } from '@/api/WeChatService'
import Pagination from '@/components/Pagination'
import { DictionaryService } from '@/api/CommonService'
import Notify from '@/utils/notify'
import Uploader from '@/components/Uploader'
export default {
  name: 'WeChatMp',
  components: { Pagination, Uploader },
  data() {
    return {
      dataForm: { id: undefined, name: undefined, originId: undefined, appId: undefined, appSecret: undefined, remark: undefined, type: undefined, verified: true, owner: undefined, qrCode: undefined, platform: undefined },
      list: undefined, total: 0, listLoading: true, fileList: [],
      listQuery: { pageNo: 1, pageSize: 20 }, types: [], dialogFormVisible: false, isAdd: true,
      rules: {
        name: [{ required: true, message: '公众号名称不能为空', trigger: 'blur' }],
        originId: [{ required: true, message: '公众号原始ID不能为空', trigger: 'blur' }],
        appId: [{ required: true, message: '公众号APPId不能为空', trigger: 'blur' }],
        appSecret: [{ required: true, message: '公众号AppSecret不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '请选择公众号类型', trigger: 'blur' }],
        owner: [{ required: true, message: '公众号主体不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initList()
    this.loadMpTypes()
  },
  methods: {
    initList() {
      this.listLoading = true
      MpService.getWeChatMpList(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    resetForm() {
      this.selectDate = ['', '']
      this.dataForm = { id: undefined, name: undefined, originId: undefined, appId: undefined, appSecret: undefined, remark: undefined, type: undefined, verified: true, owner: undefined, platform: undefined }
    },
    toAdd() {
      this.isAdd = true
      this.dialogFormVisible = true
    },
    toEdit(row) {
      this.isAdd = false
      this.dataForm = Object.assign({}, row)
      this.dialogFormVisible = true
      if (this.dataForm.qrCode) {
        this.fileList.push({ url: row.url })
      }
    },
    closeDialog() {
      this.fileList = []
      this.resetForm()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.dialogFormVisible = false
    },
    loadMpTypes() {
      DictionaryService.listDictionaryByType('mp_type').then(result => {
        if (result) {
          result.forEach(item => {
            item.value = parseInt(item.value)
          })
          this.types = result
        }
      })
    },
    addMp() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          // 默认公众号
          this.dataForm.platform = 2
          MpService.saveWeChatMp(this.dataForm).then(() => {
            this.initList()
            this.dialogFormVisible = false
            Notify.success(this, '新增成功!')
          })
        }
      })
    },
    editMp() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          MpService.editWeChatMp(this.dataForm).then(() => {
            this.initList()
            this.dialogFormVisible = false
            Notify.success(this, '编辑成功!')
          })
        }
      })
    },
    removeMp(row) {
      this.$confirm('您确认要删除 ' + row.name + ' 吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        MpService.deleteWeChatMp(row.id).then(() => {
          this.initList()
        })
      }).catch(() => {
        return false
      })
    },
    uploadQrCodeSuccess(data) {
      this.dataForm.qrCode = data.path
    },
    removeQrCodeSuccess() {
      this.dataForm.qrCode = undefined
    }
  }
}
</script>
<style>
  .item{margin:20px;}
</style>
